<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>新增卡片</title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<!--标准mui.css-->
		<link rel="stylesheet" href="../css/mui.min.css">
		<link rel="stylesheet" href="../css/common.css" />
		<style>
			.search-li{
				background-color:#F0F0F0 ;
				padding: .7rem 1rem;
				font-size: 1rem;
				font-weight: bold;
			}
			.cardUl li{
				position: relative;
				font-size: 1rem;
				padding: .4rem .7rem;
				border-bottom: 1px solid #F0F0F0;
			}
			.cardUl li label{
				display: inline-block;
				width: 30%;
			}
			.cardUl li a.cardType{
				display: inline-block;
				width: 68%;
				text-align: right;
				vertical-align: middle;
				font-size: 1.1rem;
				color: #000;
			}
			.cardUl li a.cardType span{
				color: #666;
				line-height: 2.9rem;
			}
			.cardUl li input{
				margin: 0;
				padding: 0;
				height: 3rem;
				width: 62%;
				text-align: right;
				border: none;
			}
			.cardUl li input.cardNum{
				text-align: left;
			}
			
			.arrowright{
				display: inline-block;
				width: 1rem;
				height: 3rem;
				line-height: 3rem;				
			}
			.cardUl li label,.cardUl li input,.arrowright{
				vertical-align: middle;
			}
			.getNumBtn{
				position: absolute;
				right: 1rem;
				top: .8rem;
				background-color: #2B8DF7;
				color: #fff;
				border: 1px solid #2B8DF7;
			}
		</style>
	</head>
	<body>
		<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title">新增卡片</h1>
		</header>
		<div class="mui-content">
			<div class="search-li">
		    	<p style="color: orangered;">请注意：先在门禁设备上先刷房东卡再刷空白卡，然后点击获取卡号</p>
			</div>
			<div>
				<ul class="cardUl">
					<li><label for="">卡号类型：</label><a href="#cardType" class="cardType" ><span id="cardTypeInput">身份证</span><span class="mui-icon mui-icon-arrowright arrowright"></span></a></li>
					<li><label for="">卡号：</label><input class="cardNum"  type="text"id="uuid"  value="" placeholder="请输入卡号"/><button class="getNumBtn" id="getNumBtn">获取卡号</button></li>
				</ul>
			</div>
			<div class="btn-box" id="createCard">
				<button type="button" class="mui-btn mui-btn-primary">提交</button>
			</div>
		</div>
		
		 <div id="cardType" class="mui-popover mui-popover-action">
	     	<p style="font-size: 1rem;font-weight: bold;color: #444;line-height: 3rem;padding: 0 1rem;margin: 0;border-bottom: 1px solid #F0F0F0;">选择类型</p>
			<ul class="item-flashing" id="cardTypeUl">
				<li>身份证</li>
				<li>IC卡</li>
			</ul>			
		</div>
		<style type="text/css">
			#cardType{
				top: 44px;
				background-color: #fff;
			}
		</style>
	</body>	
	<script src="../js/jquery.js"></script>
	<script src="../js/mui.min.js"></script>
	<script src="../js/app.js"></script>
	<script src="../js/md5.js"></script>
	<script>
			mui.init({
				swipeBack:true ,//启用右滑关闭功能
			});
			//卡号类型切换
			mui('#cardTypeUl').on('tap','li',function(){
				document.getElementById('cardTypeInput').innerText = this.innerText;
				mui('#cardType').popover('hide');//关闭弹层
			})
			
			//获取卡号
			document.getElementById('getNumBtn').addEventListener('tap',function(){
				var currentTIme = new Date().getTime();//获取当前服务器时间
				var mobile = localStorage.getItem('mobile');//本地取到电话号码
				var timestamp = formatDateTime();//年月日时分秒
				var key = 'udacs!@#';//固定的key值
				var token = mobile + timestamp + key;//token的拼接
				var md5 = hex_md5(token);//token的ma5加密
				var buildingId = localStorage.getItem('houseId');
				$.ajax(httpUrl+'get_card_no',{
					data:JSON.stringify({
						"auth":{
							"mobile":mobile,
							"token":md5,
							"imei":"imei",
							"imsi":"imsi",
							"timestamp" :timestamp
						},
				   		"api_ver":"1",
						"req":{
							"mobile":mobile ,
							"house_id":buildingId,
							"charge_time":currentTIme,
							"page":"1",
							"type":"1"
						}
					}),
					dataType:'json',//服务器返回json格式数据
					type:'post',//HTTP请求类型
					timeout:10000,//超时时间设置为10秒；
					contentType: "text/plain; charset=utf-8",					
					success:function(data){
						if(data.rsmsg.rscode=="0"){
							document.getElementById('uuid').value = data.resp.uuid;
						}else if(data.rsmsg.rscode=="1"){
							mui.toast(data.rsmsg.rsdesc,{duration:'short',type:''});
						}	
					},
					error:function(xhr,type,errorThrown){
						mui.toast('网络异常或者服务器出错：'+type,{duration:'short',type:''});
					}
					
			})
		})
		//完成返回页面		
		mui('#createCard').on('tap','button',function(){
			var carUUID = JSON.parse(localStorage.getItem('carUUID'));
			var uuid = document.getElementById("uuid").value;
			console.log(carUUID)
			if(uuid!==''){
				carUUID.push(uuid);
				localStorage.setItem('carUUID',JSON.stringify(carUUID));
				location.href = 'authorization.html?hasLocalStorage=true'
			}else{
				mui.toast('卡号不能为空',{duration:'short',type:''})
			}
			
		})
				
			
		</script>
	

</html>